<template>
  <div class="app-container">
    <!-- 头部信息 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">查看全部</el-menu-item>
      <el-menu-item index="2">查看最热</el-menu-item>
      <el-menu-item index="3">我的话题</el-menu-item>
      <el-menu-item index="4">发布话题</el-menu-item>
    </el-menu>

    <div>
      <el-row>
        <div id="discuss" v-for="(item, index) in list" :key="index">
          <el-card class="box-card" shadow="hover">
            <!--
					文章标题
					点赞数
					文章作者
					文章部分内容
					...暂时先这些
				  -->
            <!-- 文章标题 -->

            <h2
              style="padding: 5px 15px; color: #409EFF;display: inline-block ;"
            >
              {{ item.title }}
            </h2>
            <h2 style="display: inline-block; float: right;">
              <el-button
                size="mini"
                v-on:click="showArticle(item, index)"
                type="primary"
                >查看文章</el-button
              >

              <el-button
                size="mini"
                v-if="uid != item.userId"
                @click="reportDisucss(item)"
                type="danger"
                >举报文章</el-button
              >
              <el-button
                size="mini"
                v-if="uid == item.userId"
                @click="deleteDiscuss(item)"
                type="danger"
                >删除文章</el-button
              >
            </h2>
            <!-- 文章部分内容 -->
            <div class="content" style="padding: 5px 15px; color: gray">
              {{ item.content }}
            </div>
            <!-- 文章作者以及点赞数量 -->
            <div style="padding: 5px 15px; margin-top: 8px">
              <!-- 用户信息 -->
              <div style="display: inline-block">
                <i class="el-icon-user"></i><span>{{ item.username }}</span>
              </div>
              <!-- 点赞数量 -->
              <div
                style="display: inline-block; float: right; overflow: hidden"
              >
                <i class="el-icon-star-off"></i><span>{{ item.agree }}</span
                >&nbsp;&nbsp;&nbsp;<i class="el-icon-time"></i
                ><span>{{ item.updateTime }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-row>
    </div>

    <!-- 发布话题 -->
    <el-drawer
      title="发布话题"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="40%"
    >
      <el-alert
        title="禁止发布违法、色情等违法信息！违规者冻结账号！"
        type="error"
        show-icon
      >
      </el-alert>

      <!-- 
    标题
    讨论内容 
   -->
      <el-form
        style="margin-top: 10px;padding: 20px;"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="话题标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="话题内容" prop="content">
          <el-input type="textarea" v-model="ruleForm.content"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即发布</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-dialog title="举报信息填写" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <!-- 举报的文章id -->
        <el-form-item label="话题id" :label-width="formLabelWidth">
          <el-input v-model="form.id" disabled autocomplete="off"></el-input>
        </el-form-item>
        <!-- 举报的内容 -->
        <el-form-item label="举报内容填写" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="reportToAdmin"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import talkApi from "@/api/talk";

export default {
  data() {
    return {
      dialogFormVisible: false,
      uid: "",
      list: [],
      drawer: false,
      direction: "rtl",
      activeIndex: "1",
      size: "medium",
      activeName: "1",
      currentDate: new Date(),
      form: {
        id: "",
        content: ""
      },
      ruleForm: {},
      rules: {
        title: [
          { required: true, message: "请输入话题标题", trigger: "blur" },
          { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请输入话题内容", trigger: "blur" },
          {
            min: 10,
            max: 55,
            message: "长度在 10 到 55 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    reportToAdmin(){
      talkApi.reportDiscuss(this.form).then(resp=>{
        this.$notify({
          title: '成功',
          message: '举报信息已通知管理员！',
          type: 'success'
        });
        this.dialogFormVisible = false;
      })
    },
    deleteDiscuss(item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          talkApi.deleteDiscuss(item.id).then(resp => {
            this.init();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    reportDisucss(item) {
      this.form.id = item.id;
      this.form.content = "";
      this.dialogFormVisible = true;
      console.log(item);
    },
    init() {
      // 获取所有的文章信息
      talkApi.getAllDiscuss().then(resp => {
        this.list = resp.data.list;
      });

      // 获取当前用户的id
      talkApi.getCurrentUserId().then(resp => {
        this.uid = resp.data.uid;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          talkApi.addDiscuss(this.ruleForm).then(resp => {
            this.$notify({
              title: "成功",
              message: "话题发布成功！",
              type: "success"
            });
            this.drawer = false;
            this.activeIndex = 1;
            this.init();
          });
        } else {
          console.log("发布失败!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSelect(key, keyPath) {
      // 查看全部的话题 并且按照时间排序倒序
      if (key == 1) {
        this.activeIndex = key;
        this.init();
      }
      // 查看最热的话题 按照话题热度（点赞数量）排序
      if (key == 2) {
        this.activeIndex = key;
        talkApi.getAllDiscussByTopic().then(resp => {
          this.list = resp.data.list;
        });
      }

      // 查看我的话题 如果是自己发布的话题 自己让删除按钮露出来
      if (key == 3) {
        this.activeIndex = key;
        talkApi.getAllDiscussOfMine().then(resp => {
          this.list = resp.data.list;
        });
      }

      // 发布话题
      if (key == 4) {
        this.activeIndex = key;
        this.drawer = true;
      }
    },

    showArticle(item, index) {
      // console.log(item);
      this.$router.push("/common/show/" + item.id);
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.activeIndex = "1";
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 80%;
}

#discuss {
  margin: 0 auto;
  width: 80%;
  padding: 15px;
  background-color: transparent;
}
</style>
